<template>
  <view class="container">
    <view class="logo">
      <image
        :src="public_img + '/img/loginlogo.png'"
        mode=""
      ></image>
    </view>
    <view class="login">
      <view class="login-form">
        <view class="login-item">
          <uni-icons type="person" size="30"></uni-icons>
          <input
            class="login-input"
            placeholder="请输入账号"
            v-model="username"
            @input="onUsernameInput"
            @compositionstart="onCompositionStart"
            @compositionend="onCompositionEnd"
          />
        </view>
        <view class="login-item">
          <uni-icons type="locked" size="30"></uni-icons>
          <input
            class="login-input"
            placeholder="请输入密码"
            password
            v-model="password"
          />
        </view>
      </view>
      <view class="login-btn">
        <button class="login-submit" @click="handleLogin">登录</button>
      </view>
      <view class="login-forget">
        <text class="login-forget-btn" @click="goToRegister"
          >没有账号？前往注册</text
        >
      </view>
    </view>

   <view class="elselogin">
      <text class="elselogin-submit">其他登录方式</text>
      <image
        :src="public_img + '/img/wx.png'"
        mode="scaleToFill"
        @click="handleWechatLoginClick"
        class="wechat-icon"
      />
    </view>

    <text class="copyright">@此版权为大喇叭编程实训基地所有</text>

    <!-- 微信登录弹窗 -->
    <view class="van-popup" v-if="showPopup">
      <view class="popup-mask" @click="showPopup = false"></view>
      <view class="popup-content">
        <view class="popup-title">
          <text selectable="false" space="false" decode="false">
            礼盒商城 申请
          </text>
        </view>
        <text class="popup-text"> 获取你的昵称、头像</text>
        <!-- 头像 -->
        <view class="popup-avatar">
          <text>头像</text>
          <button
            class="avatar-wrapper"
            open-type="chooseAvatar"
            @chooseavatar="onChooseAvatar"
          >
            <image
              class="avatar"
              :src="userInfo.avatarUrl || (public_img + '/img/my.png')"
              mode="widthFix"
            />
          </button>
        </view>
        <!-- 名字昵称 -->
        <view class="popup-nickname">
          <text class="">昵称</text>
          <input
            class="nickname-input"
            type="nickname"
            placeholder="请输入昵称"
            v-model="userInfo.nickName"
            @input="onNicknameInput"
          />
        </view>
        <text
          class="random"
          selectable="false"
          space="false"
          decode="false"
          @click="randomAvatarNickname"
          >随机头像昵称</text
        >

        <!-- 允许按钮和绑定选项区域 -->
        <view class="button-group">
          <button class="allow" @click="onAllowTap">允许</button>
          <button class="cancel-btn" @click="showPopup = false">取消</button>
        </view>
      </view>
    </view>

    <!-- 未绑定账号弹窗 -->
    <view class="van-popup bind-popup" v-if="showBindAccountPopup">
      <view class="popup-mask" @click="showBindAccountPopup = false"></view>
      <view class="bind-content">
        <view
          style="
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            margin-bottom: 12px;
            color: #323233;
          "
          >绑定手机号</view
        >
        <!-- 手机号输入 -->
        <view style="margin-bottom: 10px">
          <input
            type="text"
            placeholder="请输入手机号"
            v-model="bindAccountForm.phone"
            @input="onBindPhoneInput"
            style="
              border: 1px solid #e0e0e0;
              border-radius: 4px;
              width: 100%;
              height: 35px;
            "
          />
        </view>
        <!-- 密码输入 -->
        <view style="margin-bottom: 20px">
          <input
            type="password"
            placeholder="请输入密码"
            v-model="bindAccountForm.password"
            @input="onBindPasswordInput"
            style="
              border: 1px solid #e0e0e0;
              border-radius: 4px;
              width: 100%;
              height: 35px;
            "
          />
        </view>
        <!-- 操作按钮 -->
        <view style="display: flex; justify-content: flex-end">
          <button class="bind-btn-cancel" @click="showBindAccountPopup = false">
            取消
          </button>
          <button class="bind-btn-confirm" @click="onConfirmBindAccount">
            确定
          </button>
        </view>
        <view style="text-align: center; margin-top: 15px">
          <text class="register-link" @click="goToRegister"
            >还没有账号？立即注册</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
// 引入全局配置
import { public_api, wechat_config, public_img } from "@/static/public.js";
// 引入用户相关接口
import { userApi } from "@/api/indexAPI.js";

// 常量定义
const PHONE_REGEX = /^1[3-9]\d{9}$/;
const PASSWORD_MIN_LENGTH = 6;
const PASSWORD_MAX_LENGTH = 18;
const NAVIGATE_DELAY = 1500;
const BIND_DELAY = 1000;
const CODE_RETRY_LIMIT = 3; // 最大重试次数
const CODE_RETRY_DELAY = 1000; // 重试延迟时间(ms)

export default {
  components: {
    uniIcons,
  },
  data() {
    return {
      public_img: public_img, // 添加图片域名变量
      username: "",
      password: "",
      // 微信登录相关
      showAuthModal: false,
      userInfo: {
        avatarUrl: "",
        nickName: "",
      },
      showPopup: false,
      showBindAccountPopup: false,
      bindAccountForm: {
        phone: "",
        password: "",
      },
      // 微信授权相关数据
      wxCode: null,
      encryptedData: "",
      iv: "",
      openid: "",

      // 基础配置
      baseUrl: public_api,
      appid: wechat_config.appid,
      secret: wechat_config.secret,

      // 状态控制
      isWechatLoginProcessing: false,
      isBindProcessing: false,
      isComposing: false, // 用于标识是否正在输入中文
    };
  },
  methods: {
    /**
     * 账号密码登录处理
     */
    handleLogin() {
      // 简单验证
      if (!this.username) {
        uni.showToast({
          title: "请输入用户名",
          icon: "none",
        });
        return;
      }

      if (!this.password) {
        uni.showToast({
          title: "请输入密码",
          icon: "none",
        });
        return;
      }

      // 调用后端登录接口
      uni.showLoading({
        title: "登录中...",
      });

      // 使用封装的API接口
      userApi
        .login({
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          uni.hideLoading();
          console.log("登录接口返回:", res);

          // 灵活判断登录成功条件
          if (this.isLoginSuccess(res)) {
            try {
              this.saveUserInfo(res.data || res);
              
              uni.showToast({
                title: "登录成功",
                icon: "success",
              });

              setTimeout(() => {
                uni.switchTab({
                  url: "/pages/index/index",
                });
              }, 1500);
            } catch (err) {
              console.error("保存用户信息失败", err);
              uni.showToast({
                title: "登录失败",
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: (res && res.msg) || "登录失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          console.error("登录请求失败", err);
          uni.showToast({
            title: "网络请求失败，请检查网络连接",
            icon: "none",
          });
        });
    },

    /**
     * 判断登录是否成功的通用方法
     * 兼容不同格式的成功响应
     */
    isLoginSuccess(response) {
      // 情况1: 标准格式 {code: 1, ...}
      if (response && response.code === 1) return true;
      // 情况2: 成功标识 {success: true, ...}
      if (response && response.success === true) return true;
      // 情况3: 包含token通常意味着成功
      if (response && (response.token || (response.data && response.data.token))) return true;
      // 情况4: 包含用户ID通常意味着成功
      if (response && (response.id || (response.data && response.data.id))) return true;
      
      return false;
    },

    // 用户名输入框输入事件处理
    onUsernameInput(e) {
      const value = e.detail.value;
      // 只允许数字输入（假设账号为手机号）
      const filteredValue = value.replace(/[^\d]/g, "");

      // 更新用户名字段
      this.username = filteredValue;
      
      // 如果过滤后的值与原值不同，说明输入了非数字字符
      if (filteredValue !== value) {
        // 提示用户只能输入数字
        uni.showToast({
          title: "账号只能包含数字",
          icon: "none",
          duration: 1000,
        });
      } else {
        // 限制手机号长度为11位
        if (filteredValue.length > 11) {
          this.username = filteredValue.substring(0, 11);
          uni.showToast({
            title: "账号长度不能超过11位",
            icon: "none",
            duration: 1000,
          });
        }
      }
    },

    // 中文输入开始事件
    onCompositionStart() {
      this.isComposing = true;
    },

    // 中文输入结束事件
    onCompositionEnd(e) {
      this.isComposing = false;
      // 输入结束后再处理一次输入内容
      const value = e.target.value || '';
      const filteredValue = value.replace(/[^\d]/g, "");
      if (filteredValue !== value) {
        this.username = filteredValue;
        uni.showToast({
          title: "账号只能包含数字",
          icon: "none",
          duration: 1000,
        });
      } else {
        this.username = filteredValue;
      }
    },

    /**
     * 前往注册页面
     */
    goToRegister() {
      // 关闭所有弹窗
      this.closeAllPopups();

      // 跳转到注册页面
      uni.navigateTo({
        url: "/pages/register/register",
      });
    },

    /**
     * 关闭所有弹窗
     */
    closeAllPopups() {
      this.showBindAccountPopup = false;
      this.showPopup = false;
    },

    /**
     * 显示提示信息
     */
    showToast(title, icon = "none") {
      uni.showToast({ title, icon, duration: 2000 });
    },

    /**
     * 保存用户信息到本地存储
     */
    saveUserInfo(data) {
      // 灵活处理不同格式的用户信息
      const userData = data.data || data.userinfo || data;
      
      // 确保头像和昵称信息被正确保存
      if (this.userInfo.avatarUrl) {
        userData.avatar = this.userInfo.avatarUrl;
      }
      
      if (this.userInfo.nickName) {
        userData.nickname = this.userInfo.nickName;
      }
      
      // 保存完整用户信息
      uni.setStorageSync("userinfo", data);

      // 存储token（兼容不同位置的token）
      const token = data.token || (data.data && data.data.token) || (userData.token);
      if (token) {
        uni.setStorageSync("token", token);
      }

      // 存储用户ID（兼容不同位置的ID）
      const userId = data.id || (data.data && data.data.id) || (userData.id);
      if (userId) {
        uni.setStorageSync("userId", userId);
      }
    },

    /**
     * 跳转到首页
     */
    navigateToHome() {
      console.log("准备跳转到首页");
      uni.switchTab({ url: "/pages/index/index" });
    },

    // 微信登录相关方法
    onChooseAvatar(e) {
      this.userInfo.avatarUrl = e.detail.avatarUrl;
    },

    /**
     * 处理微信登录点击事件
     */
    handleWechatLoginClick() {
      // 显示授权弹窗，让用户先授权获取头像和昵称
      this.showPopup = true;
    },
    
    /**
     * 尝试无授权微信登录
     */
    tryWechatLoginWithoutAuthorization() {
      this.isWechatLoginProcessing = true;
      uni.showLoading({ title: "登录中..." });
      
      // 获取code并尝试登录
      this.getWechatCode()
        .then((code) => {
          // 调用微信登录接口，不传头像和昵称
          return this.wxLoginWithCodeOnly(code);
        })
        .catch((err) => {
          console.log("微信登录失败", err);
          this.showToast(err.message || "微信登录失败");
        })
        .finally(() => {
          uni.hideLoading();
          this.isWechatLoginProcessing = false;
        });
    },
    
    /**
     * 仅使用code调用微信登录接口（不传头像和昵称）
     */
    wxLoginWithCodeOnly(code) {
      return new Promise((resolve, reject) => {
        // 使用封装的API接口
        userApi
          .wxLogin({
            code,
            appid: this.appid,
            appSecret: this.secret,
          })
          .then((res) => {
            console.log("微信登录接口返回:", res);
            
            // 检查是否是成功响应
            if (this.isLoginSuccess(res)) {
              try {
                this.handleWechatLoginSuccess(res);
                resolve(res);
              } catch (err) {
                reject(err);
              }
            } 
            // 检查是否是用户不存在的情况
            else if (res && res.code === 0 && res.msg === "用户不存在") {
              // 保存openid
              if (res.data && res.data.openid) {
                this.openid = res.data.openid;
                console.log("获取到openid:", this.openid);
              }
              // 显示授权弹窗
              setTimeout(() => {
                this.showPopup = true;
              }, 100);
              resolve();
            } 
            // 其他错误情况
            else {
              let userFriendlyMsg = "登录失败";
              
              if (res && res.msg) {
                if (res.msg.includes("网络")) {
                  userFriendlyMsg = "网络连接异常，请检查网络后重试";
                } else if (res.msg.includes("授权")) {
                  userFriendlyMsg = "授权失败，请重新登录";
                } else if (res.msg.includes("系统")) {
                  userFriendlyMsg = "系统错误，请稍后重试";
                } else {
                  userFriendlyMsg = res.msg;
                }
              }
              
              this.showToast(userFriendlyMsg);
              reject(new Error(res.msg || "登录失败"));
            }
          })
          .catch((error) => {
            console.error("微信登录请求失败:", error);
            this.showToast("网络请求失败，请检查网络连接");
            reject(new Error(`微信登录请求失败: ${error.message}`));
          });
      });
    },

    onNicknameInput(e) {
      this.userInfo.nickName = e.detail.value;
    },

    randomAvatarNickname() {
      // 随机生成头像和昵称
      this.userInfo.avatarUrl = `${third_party_img.picsum}/200/200?random=${Math.random()}`;
      const nicknames = ["小太阳", "开心果", "追梦人", "旅行者", "思考者"];
      this.userInfo.nickName =
        nicknames[Math.floor(Math.random() * nicknames.length)];
    },

    onAllowTap() {
      // 验证头像和昵称
      if (!this.userInfo.avatarUrl || !this.userInfo.nickName) {
        this.showToast("请填写头像和昵称");
        return;
      }

      // 防止重复点击
      if (this.isWechatLoginProcessing) return;

      // 关闭弹窗并登录
      this.showPopup = false;
      this.wechatLogin();
    },

    onBindPhoneInput(e) {
      this.bindAccountForm.phone = e.detail.value;
    },

    onBindPasswordInput(e) {
      this.bindAccountForm.password = e.detail.value;
    },

    /**
     * 微信登录主流程
     */
    wechatLogin() {
      this.isWechatLoginProcessing = true;
      uni.showLoading({ title: "登录中..." });

      // 获取code并使用
      this.getWechatCode()
        .then((code) => {
          return this.wxLoginWithCode(code);
        })
        .catch((err) => {
          console.log("微信登录失败", err);
          this.showToast(err.message || "微信登录失败");
        })
        .finally(() => {
          uni.hideLoading();
          this.isWechatLoginProcessing = false;
        });
    },

    /**
     * 使用code调用微信登录接口
     */
    wxLoginWithCode(code) {
      // 使用封装的API接口，并传递头像和昵称
      return userApi
        .wxLogin({
          code,
          avatar: this.userInfo.avatarUrl,
          nickname: this.userInfo.nickName,
          appid: this.appid,
          appSecret: this.secret,
        })
        .then((res) => {
          console.log("微信授权登录接口返回:", res);

          // 检查是否是成功响应
          if (this.isLoginSuccess(res)) {
            this.handleWechatLoginSuccess(res);
            return res.data || res;
          } 
          // 检查是否是用户不存在的情况
          else if (res && res.code === 0 && res.msg === "用户不存在") {
            // 保存openid
            if (res.data && res.data.openid) {
              this.openid = res.data.openid;
              console.log("获取到openid:", this.openid);
            }
            // 显示绑定弹窗
            setTimeout(() => {
              this.showBindAccountPopup = true;
            }, 100);
          } 
          // 其他错误情况
          else {
            let userFriendlyMsg = "登录失败";
            
            if (res && res.msg) {
              if (res.msg.includes("网络")) {
                userFriendlyMsg = "网络连接异常，请检查网络后重试";
              } else if (res.msg.includes("授权")) {
                userFriendlyMsg = "授权失败，请重新登录";
              } else if (res.msg.includes("系统")) {
                userFriendlyMsg = "系统错误，请稍后重试";
              } else {
                userFriendlyMsg = res.msg;
              }
            }
            
            this.showToast(userFriendlyMsg);
            throw new Error(res.msg || "登录失败");
          }
        })
        .catch((error) => {
          console.error("微信登录请求失败:", error);
          if (!error.message.includes("登录失败")) {
            this.showToast("网络请求失败，请检查网络连接");
          }
          throw error;
        });
    },

    /**
     * 处理微信登录成功
     */
    handleWechatLoginSuccess(data) {
      console.log("微信登录成功，准备存储用户信息", data);
      console.log("微信登录接口完整返回数据:", JSON.stringify(data, null, 2));

      try {
        // 确保用户信息中包含头像和昵称
        const userData = data.data || data.userinfo || data;
        if (this.userInfo.avatarUrl) {
          userData.avatar = this.userInfo.avatarUrl;
        }
        if (this.userInfo.nickName) {
          userData.nickname = this.userInfo.nickName;
        }

        // 保存用户信息
        this.saveUserInfo({
          code: data.code || 1,
          data: userData
        });

        // 显示登录成功提示
        uni.showToast({
          title: "登录成功",
          icon: "success",
        });

        // 延迟跳转
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 2000);
      } catch (err) {
        console.error("保存用户信息失败", err);
        uni.showToast({
          title: "登录失败",
          icon: "none",
        });
        throw new Error("登录信息保存失败");
      }
    },

    /**
     * 确认绑定账号 - 增加重试机制
     */
    onConfirmBindAccount() {
      // 防止重复点击
      if (this.isBindProcessing) return;

      this.attemptBindAccount(0); // 从第0次尝试开始
    },

    /**
     * 尝试绑定账号，带重试机制
     */
    attemptBindAccount(attempt) {
      if (attempt >= CODE_RETRY_LIMIT) {
        this.showToast("多次尝试失败，请稍后再试");
        this.isBindProcessing = false;
        return;
      }

      this.isBindProcessing = true;

      // 验证表单
      if (!this.validateBindForm()) {
        this.isBindProcessing = false;
        return;
      }

      uni.showLoading({ title: "绑定中..." });

      // 获取最新的code
      this.getWechatCode()
        .then((latestCode) => {
          console.log(
            `第${attempt + 1}次尝试，获取到的最新code:`,
            latestCode
          );

          // 调用绑定接口
          return userApi.bindMobile({
            code: latestCode,
            mobile: this.bindAccountForm.phone,
            password: this.bindAccountForm.password,
            appid: this.appid,
            appSecret: this.secret,
          });
        })
        .then((res) => {
          uni.hideLoading();
          console.log("账号绑定结果:", res);

          // 检查是否是成功响应
          if (this.isLoginSuccess(res)) {
            this.handleBindSuccess(res.data || res);
          } 
          // 检查是否是code已使用的错误
          else if (
            res &&
            res.msg &&
            res.msg.includes("code been used")
          ) {
            console.log(`第${attempt + 1}次绑定失败，code已被使用，准备重试`);
            
            // 延迟后重试
            setTimeout(() => {
              this.attemptBindAccount(attempt + 1);
            }, CODE_RETRY_DELAY);
            return;
          } 
          // 其他错误情况
          else {
            let userFriendlyMsg = "绑定失败";
            
            if (res && res.msg) {
              if (res.msg.includes("手机号格式不正确")) {
                userFriendlyMsg = "手机号格式不正确，请检查后重新输入";
              } else if (res.msg.includes("密码")) {
                userFriendlyMsg = "密码格式不正确，密码需为6-18位字符";
              } else if (res.msg.includes("已绑定")) {
                userFriendlyMsg = "该手机号已被绑定，请使用其他手机号";
              } else if (res.msg.includes("不存在")) {
                userFriendlyMsg = "用户不存在，请检查输入信息";
              } else if (res.msg.includes("account exist") || res.msg.includes("账号已存在")) {
                userFriendlyMsg = "该账号已存在，请直接登录或使用其他手机号";
              } else if (res.msg.includes("Account not exist") || res.msg.includes("账号不存在")) {
                userFriendlyMsg = "账号不存在，请检查输入信息或先注册账号";
              } else if (res.msg.includes("Password is incorrect") || res.msg.includes("密码错误")) {
                userFriendlyMsg = "密码错误，请检查密码后重新输入";
              } else {
                userFriendlyMsg = res.msg;
              }
            }
            
            this.showToast(userFriendlyMsg);
            throw new Error(res.msg || "绑定失败");
          }
        })
        .catch((error) => {
          uni.hideLoading();
          console.error("绑定账号失败:", error);
          if (!error.message.includes("绑定失败")) {
            this.showToast("网络请求失败，请检查网络连接");
          }
          this.isBindProcessing = false;
        });
    },

    /**
     * 验证绑定表单
     */
    validateBindForm() {
      // 验证手机号和密码是否为空
      if (!this.bindAccountForm.phone || !this.bindAccountForm.password) {
        this.showToast("请输入手机号和密码");
        return false;
      }

      // 验证手机号格式
      if (!PHONE_REGEX.test(this.bindAccountForm.phone)) {
        this.showToast("请输入正确的手机号");
        return false;
      }

      // 验证密码长度
      if (
        this.bindAccountForm.password.length < PASSWORD_MIN_LENGTH ||
        this.bindAccountForm.password.length > PASSWORD_MAX_LENGTH
      ) {
        this.showToast(
          `密码长度需在${PASSWORD_MIN_LENGTH}-${PASSWORD_MAX_LENGTH}位之间`
        );
        return false;
      }

      return true;
    },

    /**
     * 获取微信登录code - 确保每次都是新的code
     */
    getWechatCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success: (res) => {
            if (res.code) {
              resolve(res.code);
            } else {
              reject(new Error("获取微信code失败"));
            }
          },
          fail: (err) => {
            reject(new Error(`微信登录失败: ${err.errMsg}`));
          },
        });
      });
    },

    /**
     * 处理绑定成功
     */
    handleBindSuccess(data) {
      try {
        if (data) {
          this.saveUserInfo(data);
          this.showBindAccountPopup = false;

          this.showToast("绑定成功，登录中...", "success");

          setTimeout(() => {
            this.navigateToHome();
          }, BIND_DELAY);
        } else {
          throw new Error("绑定返回数据异常");
        }
      } catch (error) {
        console.error("处理绑定成功时出错:", error);
        this.showToast("绑定处理失败");
      } finally {
        this.isBindProcessing = false;
        uni.hideLoading();
      }
    },
  },
  onLoad() {
    // 页面加载时检查是否已经登录
    try {
      const userinfo = uni.getStorageSync("userinfo");
      if (userinfo) {
        // 如果已经登录，直接跳转到首页
        this.navigateToHome();
      }
    } catch (err) {
      console.error("检查登录状态失败", err);
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.logo {
  width: 80%;
  margin-top: 100rpx;
  margin-bottom: 80rpx;

  image {
    width: 90%;
    height: 36vh;
    margin-left: 5%;
    margin-top: 4%;
  }
}

.login {
  width: 80%;
  background-color: #f1f1f1;
  border-radius: 20rpx;
  padding: 40rpx;

  .login-form {
    .login-item {
      margin-bottom: 30rpx;
      border: #666 solid 1px;
      padding: 0rpx 10rpx;
      border-radius: 40px;
      display: flex;
      align-items: center;

      .login-input {
        width: 80%;
        height: 80rpx;
        border: none;
        border-radius: 10rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
      }
    }
  }

  .login-btn {
    margin-top: 50rpx;

    .login-submit {
      width: 100%;
      height: 80rpx;
      background-color: #ff8d1a;
      color: #fff;
      border-radius: 40rpx;
      font-size: 32rpx;
      border: none;
    }
  }

  .login-forget {
    text-align: center;
    margin-top: 20rpx;

    .login-forget-btn {
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
  }
}

.elselogin {
  width: 60%;
  margin-top: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #666;
  font-size: 14px;

  image {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    cursor: pointer;
  }
}

.copyright {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* 微信登录弹窗样式 */
.van-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56%;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
}

/* 微信授权样式 */
.popup-title {
  width: 100%;
  height: 70px;
  text-align: center;
  font-size: 18px;
  display: flex;
  align-items: center;

  text {
    margin-left: 10px;
    font-size: 22px;
    line-height: 20px;
  }
}

.popup-text {
  width: 100%;
  height: 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 头像选择 */
.popup-avatar {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 17px;
  border-bottom: none;

  text {
    width: 20%;
  }
}

.avatar-wrapper {
  width: 15%;
  height: 50px;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  background: transparent;
  border: none;
  outline: none;
}

.avatar {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  outline: none;
}

/* 昵称 */
.popup-nickname {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 17px;
  position: relative;
  border-bottom: #999 1px solid;

  text {
    width: 20%;
  }
}

.nickname-input {
  width: 80%;
  text-align: left;
  padding-left: 5%;
  font-size: 16px;
  border: none;
  outline: none;
}

.random {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: start;
  align-items: start;
  color: #999999;
  margin: 10px 0;
  cursor: pointer;
}

/* 按钮样式优化 */
.button-group {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.allow {
  font-size: 16px;
  background-color: #e8f1ff;
  border: none;
  color: #1592fc;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.cancel-btn {
  font-size: 16px;
  width: 100%;
  background-color: #ffffff;
  color: #525252;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

/* 绑定账号弹窗 */
.bind-popup .bind-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background-color: #fff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  box-sizing: border-box;
  z-index: 1000;
}

.bind-btn-cancel {
  margin-right: 12px;
  color: #333;
  background-color: #fff;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
}

.bind-btn-confirm {
  background-color: #1592fc;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}

/* 注册链接样式 */
.register-link {
  color: #1592fc;
  font-size: 14px;
  cursor: pointer;
}
</style>
